<template>
    <view class="filter-item" v-if="show">
        <view class="filter-item-label">{{ label }} <text class="tip-text" v-if="tipText">({{tipText}})</text></view>
        <view class="filter-item-content tag-group">
            <!-- 选项列表 -->
            <view v-for="item in options" :key="item.value" class="tag" :class="{ active: isItemSelected(item.value) }"
                @click="selectItem(item.value)">
                {{ item.label }}
            </view>

            <!-- 自定义选项（可选） -->
            <view v-if="customOption" class="tag" :class="{ active: isCustomSelected }" @click="selectCustom">
                {{ customOption.label }}
            </view>
        </view>
    </view>
</template>

<script>
export default {
	name: 'FilterItem',
	props: {
		tipText: {
			type: String,
			default: ''
		},
		
		// 是否显示该筛选项
		show: {
			type: Boolean,
			default: true
		},
		// 筛选项标签
		label: {
			type: String,
			required: true
		},
		// 选项列表
		options: {
			type: Array,
			default: () => []
		},
		// 当前选中的值
		value: {
			type: [String, Array],
			default: () => []
		},
		// 是否为多选模式
		multiple: {
			type: Boolean,
			default: true
		},
		// 自定义选项（如"自定义"时间选择）
		customOption: {
			type: Object,
			default: null
		},
		// 自定义选项的选中状态
		customSelected: {
			type: Boolean,
			default: false
		}
	},
	computed: {
		// 判断是否全部选中
		isAllSelected() {
			if (this.multiple) {
				return this.value.length === 0;
			} else {
				return this.value === '';
			}
		},
		// 判断自定义选项是否选中
		isCustomSelected() {
			return this.customSelected;
		}
	},
	methods: {
		// 选择全部
		selectAll() {
			if (this.multiple) {
				this.$emit('input', []);
			} else {
				this.$emit('input', '');
			}
			this.$emit('change', this.multiple ? [] : '');
		},

		// 选择单个选项
		selectItem(value) {
			if (this.multiple) {
				const newValue = [...this.value];
				const idx = newValue.indexOf(value);
				if (idx > -1) {
					newValue.splice(idx, 1);
				} else {
					newValue.push(value);
				}
				this.$emit('input', newValue);
				this.$emit('change', newValue);
			} else {
				const newValue = this.value === value ? '' : value;
				this.$emit('input', newValue);
				this.$emit('change', newValue);
			}
			this.$forceUpdate();
		},

		// 选择自定义选项
		selectCustom() {
			this.$emit('custom-select');
		},

		// 判断单个选项是否选中
		isItemSelected(value) {
			if (this.multiple) {
				return this.value.includes(value);
			} else {
				return this.value === value;
			}
		}
	}
};
</script>

<style lang="scss" scoped>
.filter-item {
    color: #333;
    padding: 15rpx 32rpx;

    &-label {
        font-size: 30rpx;
        font-weight: bold;
        margin-bottom: 16rpx;

        text {
            color: #999;
            font-weight: normal;
        }
    }

    .tip-text {
        color: #999;
        font-weight: normal;
    }
}

.tag-group {
    display: flex;
    flex-wrap: wrap;
    gap: 0;
}

.tag {
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    width: calc((100% - 40rpx) / 3); // 3个一行，间隔20rpx
    height: 48rpx;
    margin: 0 20rpx 20rpx 0;
    border: 2rpx solid #ccc;
    border-radius: 8rpx;
    color: #666;
    background: #fff;
    font-size: 28rpx;
    transition: all 0.2s;
    padding-bottom: 2rpx;
}

// 最后一行最后一个不右边距
.tag:nth-child(3n) {
    margin-right: 0;
}

.tag.active {
    border-color: #0091FF;
    color: #0091FF;
}
</style>
